<template>
  <div class="footed">
    <div class="footCent wrap">
      <!-- 底部左边 -->
      <div class="left">
        <!-- 底部左边上面 -->
        <div class="leftTop">
        </div>
          <div class="letBom">
            叩丁狼是一家专注于培养高级IT技术人才，为学员提供定制化IT职业规划方案及意见咨询服务的教育科技公司，为您提供海量优质课程，以及创新的线上线下学习体验，帮助您获得全新的个人发展和能力提升。
            </div>
      </div>
      <div class="concent">
        <!-- 微信公众号 | 新浪微博 -->
        <a href="javascript:;" class="gzh">微信公众号<img src="../assets/img/wx.5584e874.png" alt=""></a><span>|</span>
        <a href="javascript:;">新浪微博</a><span>|</span>
        <a href="javascript:;" class="kf">在线客服<img src="../assets/img/service.848ec511.png" alt=""></a>
      </div>
      <div class="right">
        <span>全国免费咨询热线：</span>
        <p>020-85628002</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang='less' scoped>
  .footed{
    // width: 1920px;
    height: 240px;
    background: #242B39;
    .footCent{
      display: flex;
      margin: 0 auto;
      width: 1200px;
      height: 240px;
      // background: yellow;


    // 底部左边
    .left{
      padding-top:30px;
      width: 426px;
      // 底部左边 的上面
   .leftTop{
        width: 360px;
        height: 55px;
        background: url('../assets/img/slogan.7730f7f2.png') no-repeat;
    }
       // 底部左边 的下面
    .letBom{
      line-height: 16px;
      font-size: 12px;
      color:#7D879A;
      padding-top:20px ;
    }

    }
    // 底部中间
    .concent{
      padding:110px 135px 100px 155px;

      //  公众号 移入显示
      .gzh{
          position: relative;
        img{
          display: none;
          position: absolute;
          top: -105px;
          left: -10px;
        }
        &:hover img{
          display: block;
         
        }
      }
      .kf{
          position: relative;
        img{
          display: none;
          position: absolute;
          top: -105px;
          left: -15px;
        }
        &:hover img{
          display: block;
        }
      }
      a{
        text-decoration: none;
        color:#7D879A ;
        &:hover{
           color: #fff;
        }
      }
      span{
          padding: 0 10px;
          color:#7D879A ;
      }
    }
 // 底部右边
    .right{
        padding-top:65px;
        span{
            line-height: 30px;
            color:#7D879A ;
        }
        p{  
            font-size: 28px;
            color:#fff ;
        }
    }
     
    }
   
  }
</style>